<template>
  <view>
    <view class="stake-page">
      <HeaderNav></HeaderNav>

      <view class="stake-conter">
        <view class="total-card">
          <view class="title">
            <view></view>
            <view>{{ i18n.h58 }}</view>
          </view>
          <view class="num">{{ Power || 0 }}</view>
          <view class="row-rate">
            <view class="lefts">
              <view></view>
              <view>{{ i18n.h59 }}</view>
            </view>
            <view class="rights">{{ Rate || 0 }}%</view>
          </view>
          <view class="btn" @click="toPage('/subPackages/other/staking')">{{
            i18n.h60
          }}</view>
        </view>
        <view class="grid-item">
          <view class="item locking">
            <view class="lefts">
              <view>{{ i18n.h61 }}</view>
              <view>{{ Locking || 0 }}</view>
            </view>
            <image
              src="/static/images/locking.png"
              mode=""
              class="rights"
            ></image>
          </view>

          <view class="item released">
            <view class="lefts">
              <view>{{ i18n.h62 }}</view>
              <view>{{ Release || 0 }}</view>
            </view>
            <image
              src="/static/images/released.png"
              mode=""
              class="rights"
            ></image>
          </view>
        </view>
        <view class="accelerated">
          <view>{{ i18n.h63 }}</view>
          <view>{{ Yesterday || 0 }}</view>
        </view>
        <view class="list-cont">
          <view class="row-header">
            <view>{{ i18n.h64 }}</view>
            <view>{{ i18n.h65 }}</view>
          </view>
          <view v-if="list.length > 0">
            <view class="row-item" v-for="(item, index) in list" :key="index">
              <view>{{ getTemp(item.Createtime) }}</view>
              <view>{{ item.Amount }}</view>
            </view>
          </view>
          <view v-else>
            <empty :MarginT="70"></empty>
          </view>
        </view>
      </view>
    </view>

    <FooterNav :modelKey="2" />
  </view>
</template>
<script>
import HeaderNav from "../../components/header-nav/header-nav.vue";
import FooterNav from "@/components/footer-nav/footer-nav.vue";
import uniCopy from "@/js_sdk/xb-copy/uni-copy.js";
import config from "@/config/index.js";
import { getStakIndexApi, getReleasesApi } from "@/api/module/home";
import {} from "@/common/wb3";

export default {
  components: {
    HeaderNav,
    FooterNav,
  },
  props: {},
  data() {
    return {
      list: [],
      Power: "", //算力
      Rate: "", //释放比例 0.6表示0.6%
      Locking: "", //锁定数量
      Release: "", //已释放
      Yesterday: "", //昨日收益
    };
  },

  watch: {},
  computed: {
    i18n() {
      return this.$t("home");
    },
  },

  created() {},
  mounted() {},
  onShow() {
    this.init();
  },
  methods: {
    init() {
      this.getInfo();
      this.getList();
    },
    getInfo() {
      getStakIndexApi().then((res) => {
        if (res.code == 0) {
          this.Power = res.data.Power; //算力
          this.Rate = res.data.Rate; //释放比例 0.6表示0.6%
          this.Locking = res.data.Locking; //锁定数量
          this.Release = res.data.Release; //已释放
          this.Yesterday = res.data.Yesterday; //昨日收益
        }
      });
    },
    getList() {
      getReleasesApi().then((res) => {
        if (res.code == 0) {
          this.list = res.data || [];
        }
      });
    },

    copy() {
      uniCopy({
        content: this.address,
        success: (res) => {
          uni.showToast({
            title: this.$t("home.h25"),
            icon: "none",
          });
          this.shareModel = false;
        },
        error: (e) => {
          uni.showToast({
            title: e,
            icon: "none",
            duration: 3000,
          });
        },
      });
    },

    toPage(path) {
      if (path !== "") {
        uni.navigateTo({
          url: path,
        });
      }
    },
    toLink(path) {
      window.open(path, "_blank");
    },
    toRecord(type) {
      uni.navigateTo({
        url: `/pages/home/record?type=${type}`,
      });
    },
    number2string(num) {
      num = String(num);
      var eSplit = num.split("e");
      var e = +(eSplit[1] || 0);
      var pad = "0".repeat(500);
      var numSplit = eSplit[0].split(".");
      var str;
      var numSplit1 = numSplit[1] || "";
      if (e < 0) {
        str = "0." + (pad + numSplit[0]).slice(e) + numSplit1;
      } else {
        str =
          numSplit[0] +
          (numSplit1 + pad).slice(0, e) +
          "." +
          numSplit1.slice(e);
      }
      return (
        str
          .replace(/\.?0*$/, "")
          .replace(/^0*/, "")
          .replace(/^\./, "0.") || "0"
      );
    },
    getTemp(timestamp) {
      // let timestamp = 1662537367
      // 此处时间戳以毫秒为单位
      let date = new Date(parseInt(timestamp) * 1000);
      let Year = date.getFullYear();
      let Moth =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let Minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let Sechond =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return (
        Year +
        "-" +
        Moth +
        "-" +
        Day +
        " " +
        Hour +
        ":" +
        Minute +
        ":" +
        Sechond
      );
      // let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
      // 时间戳

      console.log(GMT); // 2022-09-07 15:56:07
    },
    getCaption(strings) {
      var strLength = strings.length;
      var shortName = strings.substring(0, 2);
      var shortName2 = strings.substring(strLength - 4, strLength);
      let str = `${shortName}...${shortName2}`;
      return str;
    },
  },
};
</script>
 <style lang="scss" scoped>
.stake-page {
  .stake-conter {
    padding: 0 32rpx 120rpx;
    .total-card {
      min-height: 424rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 40rpx 44rpx;
      background: #f5f3fe;
      border-radius: 32rpx;
      .title {
        display: flex;
        align-items: center;
        view {
          font-weight: 500;
          font-size: 30rpx;
        }
        :nth-child(1) {
          color: #835bf1;
        }
        :nth-child(2) {
          color: #000000;
        }
      }
      .num {
        font-weight: 600;
        font-size: 64rpx;
        color: #000000;
      }
      .row-rate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .lefts {
          display: flex;
          align-items: center;
          :nth-child(1) {
            width: 20rpx;
            height: 20rpx;
            background: #835bf1;
            border-radius: 50%;
          }
          :nth-child(2) {
            margin-left: 12rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
          }
        }
        .rights {
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
        }
      }
      .btn {
        margin-top: 12rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #835bf1;
        border-radius: 100rpx;
        color: #ffffff;
        font-size: 28rpx;
        text-align: center;
      }
    }
    .grid-item {
      margin: 32rpx 0 16rpx;
      display: grid;
      grid-template-columns: 49% 49%;
      justify-content: space-between;
      .item {
        padding: 32rpx;
        border-radius: 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .lefts {
          :nth-child(1) {
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
          }
          :nth-child(2) {
            margin-top: 16rpx;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }
        .rights {
          width: 60rpx;
          height: 60rpx;
        }
      }
      .locking {
        background: #fef2f2;
      }
      .released {
        background: #f7fee7;
      }
    }
    .accelerated {
      border-radius: 24rpx;
      padding: 28rpx 32rpx;
      background: #e7f1fe;
      display: flex;
      justify-content: space-between;
      align-items: center;
      :nth-child(1) {
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
      :nth-child(2) {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
      }
    }
    .list-cont {
      margin-top: 32rpx;
      .row-header {
        padding: 16rpx 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        view {
          font-weight: 400;
          font-size: 24rpx;
          color: #97a3b6;
        }
      }
      .row-item {
        margin-bottom: 16rpx;
        padding: 26rpx 24rpx;
        background: #f8fafc;
        border-radius: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        view {
          font-size: 24rpx;
          color: #000000;
        }
        :nth-child(1) {
          font-weight: 400;
        }
        :nth-child(2) {
          font-weight: 500;
        }
      }
    }
  }
}
</style>
